<template>
  <div class="registInfo">
    <mt-header>
      <mt-button icon="back" slot="back"></mt-button>
    </mt-header>
    <div class="registInfoContent">
      <div class="InfoImg">
        <label for="img">
          <input type="file" id="img" @change="handleFiles" />
          <img :src="src" alt="" />
        </label>
      </div>

      <mt-field
        placeholder="请输入用户名"
        :attr="{ maxlength: 16 }"
        v-model="user"
      ></mt-field>

      <mt-radio
        :options="['男', '女']"
        class="myRadiolist"
        v-model="sex"
      ></mt-radio>

      <mt-datetime-picker ref="picker" type="date" @confirm="handleConfirm">
      </mt-datetime-picker>

      <span @click="openPicker">
        <mt-field placeholder="请输入生日" v-model="pickerVisible"></mt-field>
      </span>

      <mt-button type="primary" class="btnSubmit" @click="submit"
        >完成</mt-button
      >
    </div>
  </div>
</template>

<script>
import MtHeader from "@/components/MtHeader.vue";
export default {
  data() {
    return {
      user: "",
      sex: "",
      pickerVisible: "",
      src: require("@/assets/images/login/infoImg.png"),
      fale: true,
    };
  },

  //计算属性，会监听依赖属性值随之变化
  computed: {},

  //状态监听
  watch: {},

  //过滤器
  filters: {},

  //方法
  methods: {
    submit() {
      let user = this.user;
      let sex = this.sex;
      let pickerVisible = this.pickerVisible;
      if (user && sex && pickerVisible) {
        this.$toast({
          message: "操作成功",
          duration: 1000,
        });
        setTimeout(() => {
          this.$router.push("/home");
        }, 1000);
      }else{
        this.$toast({
          message: "请填写完信息",
          duration: 1000,
        });
      }
    },
    handleFiles(e) {
      let file = e.target.files[0];

      let reader = new FileReader();
      reader.readAsDataURL(file);

      reader.onloadend = () => {
        // 图片的 base64 格式, 可以直接当成 img 的 src 属性值
        let dataURL = reader.result;
        console.log(dataURL);
        this.src = dataURL;
      };
    },
    openPicker() {
      this.$refs.picker.open();
    },
    handleConfirm(date) {
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      //判断月份需不需要添加零
      month = month > 9 ? month : "0" + month;
      let datee = date.getDate() > 9 ? date.getDate() : "0" + date.getDate();
      this.pickerVisible = year + "-" + month + "-" + datee;
    },
  },

  //组件
  components: { MtHeader },

  //生命周期 - 实例完成
  created() {},

  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>

<style lang='scss' scoped>
.registInfo {
  .registInfoContent {
    ::v-deep .mint-cell-wrapper {
      background: none;
    }
    .InfoImg {
      width: 100px;
      height: 100px;
      margin: 0 auto;
      text-align: center;
      label {
        width: 100%;
        height: 100%;
        display: flex;
      }
      img {
        flex: 1;
        border-radius: 50%;
        object-fit: cover;
      }
    }
    #img {
      display: none;
    }
    ::v-deep .myRadiolist {
      label {
        margin: 0;
      }
      a {
        display: inline-block;
        background: none;
      }
    }
  }
}
.btnSubmit {
  width: calc(100%);
  margin-top: 70px;
}
</style>
